<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>举报这篇文章</title>
</head>
<body>
<div>
    <form>
        <input type="text" id="context" maxlength="200" size="100" placeholder="不得超过200个汉字">
        <input type="button" value="举报描述" onclick="report_click()">
    </form>
</div>
<br>
<p>请上传举报描述后再上传图片</p>
<div>
    <form enctype="multipart/form-data">
        <input type="file" id="imgFile" onchange="img_base()">
        <input type="button" value="上传图片" onclick="pic_click()">
    </form>
</div>
</body>
</html>

<script src="../js/ajax.js"></script>
<script src="../js/vue.js"></script>

<script>
    function report_click(){
        let context = document.getElementById("context").value;
        let blog_id=window.localStorage.getItem("blogId");
        ajax({
            method: "post",
            url: "../../report",
            data: {
                context:context,
                blogId:blog_id,
                code:0
            },
            success: function (result) {
                window.localStorage.setItem("reportId",result['reportId']);
                alert("上传成功");
                console.log(result);
            },
            error:function (result){
                console.log(result);
            }
        })
    }
    let base64img;

    function pic_click(){
        let report_id = window.localStorage.getItem("reportId");
        ajax({
            type:"post",
            url:"../../picture",
            data:{
                reportId:report_id,
                picture:base64img,
                code:1
            },
            success:function (result){
                alert("上传成功");
                console.log(result);
            },
            error:function (result){
                console.log(result);
            }
        })
    }

    function img_base (){
        //获取选中图片对象（包含文件的名称、大小、类型等，如file.size）
        let file = document.getElementById("imgFile").files[0];
        // 声明js的文件流
        let reader = new FileReader();
        if(file){
            //通过文件流将文件转换成Base64字符串
            reader.readAsDataURL(file);
            reader.onloadend = function(){
                // 把转换过得base赋值给全局变量
                // 这里reader.result就是转换好的bsae64格式图片
                base64img = reader.result;
            }
        }
    }
</script>